const mockObj = {
  name: "嘉伟",
  profit: 100,
  cells: [
    {
      label: "等级",
      value: "（城市）运营中心"
    },
    {
      label: "金额",
      value: "1225"
    },
    {
      label: "结算时间",
      value: "2019-12-02"
    },
    {
      label: "类型",
      value: "批发分润"
    }
  ]
};

export default {
  name: "DistributDetails",

  data() {
    return {
      searchVal: "",

      currentDate: "",

      type: 0,

      options: [
        { text: "全部", value: 0 },
        { text: "批发分润", value: 1 },
        { text: "出售分润", value: 2 }
      ],

      list: {
        loading: false,

        finished: false,

        refreshing: false,

        error: false,

        data: []
      }
    };
  },

  methods: {
    onSearch() {},

    onCancel() {},

    onLoad(isRefresh = false) {
      const { list } = this;

      setTimeout(() => {
        console.log("load");

        if (isRefresh) {
          list.data = [];
        }
        for (let i = 0; i < 3; i++) {
          list.data.push(mockObj);
        }

        list.loading = false;

        if (list.data.length >= 20 && !list.error) {
          list.error = true;
        } else {
          list.error = false;
        }
        if (list.data.length >= 10) {
          list.finished = true;
        }
      }, 500);
    },

    onRefresh() {
      const { list } = this;

      setTimeout(() => {
        list.error = false;
        list.finished = false;
        list.refreshing = false;
        this.onLoad(true);
      }, 1000);
    },

    renderFilters() {
      return (
        <form ref="filters" action="/">
          <van-search
            class="search"
            placeholder="请输入搜索关键词"
            value={this.searchVal}
            on-input={val => {
              this.searchVal = val;
            }}
            show-action
            on-search="onSearch"
          >
            <div slot="action" on-click="onSearch">
              搜索
            </div>
          </van-search>
          <van-cell-group>
            <van-dropdown-menu>
              <van-dropdown-item
                value={this.type}
                on-input={val => {
                  this.type = val;
                }}
                options={this.options}
              />
              <van-dropdown-item title="时间">
                <van-field
                  label="时间始"
                  type="date"
                  placeholder="请输入日期"
                />
                <van-field
                  label="时间至"
                  type="date"
                  placeholder="请输入日期"
                />
              </van-dropdown-item>
            </van-dropdown-menu>
          </van-cell-group>
        </form>
      );
    },

    renderBlocks() {
      return (
        <section ref="blocks" class="block-wrap">
          <div class="block">
            <p>可结算分润</p>
            <p class="money">2100</p>
          </div>
          <div class="block">
            <p>待结算分润</p>
            <p class="money">2100</p>
          </div>
          <div class="block">
            <p>历史合计分润</p>
            <p class="money">2100</p>
          </div>
        </section>
      );
    },

    renderList() {
      const on = {
        "update:title"(val) {
          this.error = val;
        }
      };
      const { list } = this;

      return (
        <van-pull-refresh
          value={list.refreshing}
          on-input={val => {
            list.refreshing = val;
          }}
          on-refresh={this.onRefresh}
        >
          <van-list
            {...on}
            value={list.loading}
            finished={list.finished}
            error={list.error}
            finished-text="没有更多了"
            error-text="请求失败，点击重新加载"
            on-input={val => {
              console.log("TCL: renderList -> val", val);
              list.loading = val;
            }}
            on-load={this.onLoad}
          >
            {list.data.map(item => (
              <section class="pannel-wrap">
                <div class="panel-header">
                  <span class="panel-header-title">{item.name}</span>
                  <span class="panel-header-text">分润: {item.profit} </span>
                </div>
                <div class="panel-main">
                  {item.cells.map(cell => (
                    <van-cell
                      border={false}
                      class="text-small"
                      title={cell.label}
                      value={cell.value}
                    />
                  ))}
                </div>
              </section>
            ))}
          </van-list>
        </van-pull-refresh>
      );
    }
  },

  render() {
    return (
      <div>
        {this.renderFilters()}
        {this.renderBlocks()}
        {this.renderList()}
        <van-button
          on-click={() => {
            this.$router.push("/cashManage");
          }}
          class="sticky"
          type="info"
        >
          提 现
        </van-button>
      </div>
    );
  }
};
